<template>
  <div class="container">
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <van-panel
       :title="item.order_time"
       :status="item.status_text"
       v-for="(item, key) in list"
       v-bind:key="key"
       :name="item.id"
       class="order-panel"
       @click.native="pushWeblink(item.link)"
      >
        <div class="van-card-goods-tidy">
            <van-card
              :title="goods.name"
              :desc="goods.sku"
              :num="goods.number"
              :price="goods.price"
              centered
              :thumb="goods.cover"
              v-for="goods in item.goods"
              :key="goods.id"
              class="van-hairline-bottom"
            />
        </div>
        <div slot="footer">
            <div class="order_amount">
              <div class="arrow arrow-top"></div>
              共{{item.goods.length}}件商品 实付金额
              <span class="price-cny">{{item.pay}}</span>
            </div>
            <van-button size="small"
             v-for="(btn,label) in item.handle"
             :key="btn.id"
             :type="btn.type"
             @click.stop="onClickHandle(label,item.id,key)"
            >
             {{btn.text}}
            </van-button>
        </div>
      </van-panel>
    </van-list>
  </div>
</template>
<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Popup,
  Button,
  Panel,
  PullRefresh,
  Lazyload,
  Card,
  Dialog,
  List
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [PullRefresh.name]: PullRefresh,
    [Lazyload.name]: Lazyload,
    [Card.name]: Card,
    [Dialog.name]: Dialog,
    [List.name]: List
  },

  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      count: 0,
      show: true,
      visible: false,
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },

  created () {},
  methods: {
    onLoad () {
      let page = this.meta.currentPage + 1
      let type = this.$route.params.type
      this.axios
        .get('/shop/order', {
          params: { page: page, type: type },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onClick () {
      console.log('clicked')
    },
    onClickHandle (label, id, index) {
      console.log(label)
      if (label === 'cancel') {
        this.$dialog
          .confirm({
            message: '您确认要取消当前订单吗？'
          })
          .then(() => {
            this.axios
              .post('/shop/order/cancel', { id: id })
              .then(response => {
                this.list.splice(index, 1)
              })
              .catch(function (error) {
                console.log(error)
              })
          })
          .catch(() => {
            // on cancel
          })
      } else if (label === 'pay') {
        this.showPaymentControl(id)
      }
    },
    showPaymentControl (id) {
      console.log('调用原生支付弹框，支付订单ID：' + id)
      this.jsBridge.showPaymentControl(
        {
          id: id,
          scope: 'shop'
        },
        response => {
          if (response.status) {
            console.log('已调起原生支付框')
          } else {
            this.$toast('支付发起失败，请重试~')
          }
          this.showSubmiting = false
        }
      )
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.tips {
  background: #d8e8f8;
  color: #047bb3;
  font-size: 0.2rem;
  margin: 0;
  padding: 0.2rem 0.3rem;
  text-align: center;
  font-weight: normal;
}
.order-panel {
  margin-top: 10px;
  /deep/ .van-cell {
    &:not(:last-child)::after {
      left: 0;
    }
    &__title {
      span {
        font-size: 80%;
        color: #aaa;
        font-weight: 300;
      }
    }
  }

  /deep/ .van-panel__footer {
    text-align: right;
    padding-top: 44px;
    .van-button {
      margin-left: 5px;
    }
    .order_amount {
      position: absolute;
      right: 15px;
      top: 0;
      padding: 10px 0;
      .arrow {
        left: auto;
        right: 10px;
        top: -10px;
      }
    }
  }
  .van-panel__content {
    padding: 20px;
  }
}
</style>
